<template>
  
</template>

<script>
export default {

}
</script>

<style>

</style>
<template>
  <div class="app-container">
    <div class="item">
      <div class="tab">
        <h5>基本信息</h5>
        <div class="">
          <el-button type="primary" @click="headledeliver">发货</el-button>
          <el-button type="danger" @click="headlerefund">退款处理</el-button>
        </div>
      </div>
      <div class="info">
        <ul>
          <li>订单编号：{{order.orderSn}}</li>
          <li>配送方式:{{order.deliveryCompany}}</li>
          <li>
            订单状态：
            <span v-if="order.status==0">待付款</span>
            <span v-if="order.status==1">待发货</span>
            <span v-if="order.status==2">已发货</span>
            <span v-if="order.status==3">已关闭</span>
            <span v-if="order.status==4">已退款</span>
          </li>
          <li>发货时间：{{order.deliveryTime}}</li>
          <li>创建时间：{{order.createTime}}</li>
          <li>发货单号:</li>
          <li>付款时间:{{order.paymentTime}}</li>
        </ul>
      </div>
    </div>
    <div class="item">
      <div class="tab">
        <h5>收件人信息</h5>
        <div></div>
      </div>
      <div class="info">
        <ul>
          <li>姓名：{{order.receiverName}}</li>
          <li>客户留言:{{order.message}}</li>
          <li class="tel">手机:{{order.receiverPhone}}</li>
          <li>地址：{{order.receiverProvince}}{{order.receiverCity}}{{order.receiverRegion}}{{order.receiverDetailAddress}}</li>
        </ul>
      </div>
    </div>
    <div class="item">
      <div class="tab">
        <h5>商品信息</h5>
        <div></div>
      </div>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column label="商品名称">
          <template slot-scope="scope">{{scope.row.name}}</template>
        </el-table-column>
        <el-table-column label="数量规格">
          <template slot-scope="scope">{{scope.row.amountSpecification}} {{scope.row.packSpecification}}</template>
        </el-table-column>
        <el-table-column label="商品价格">
          <template slot-scope="scope">{{scope.row.price}}</template>
        </el-table-column>
        <el-table-column label="购买数量">
          <template slot-scope="scope">{{scope.row.quantity}}</template>
        </el-table-column>
      </el-table>
    </div>
    <div class="tips">
      费用信息：商品总价 {{order.totalAmount}}+配送费 {{order.freightAmount}}-积分抵扣 {{order.integralAmount}}=
      <span>应付金额 {{order.payAmount}}</span>
    </div>
    <!-- 发货 -->
    <el-dialog title="快递信息" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="快递公司" required validate>
          <el-input v-model="form.conmpany"></el-input>
        </el-form-item>
        <el-form-item label="快递单号" required validate>
          <el-input v-model="form.orderSn"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="headlesumbit">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 退货 -->
    <el-dialog title="退款处理" :visible.sync="dialogVisiblerefund" width="30%" :before-close="handleCloserefund">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="退款备注" required validate>
          <el-input type="textarea" v-model="form.desc"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisiblerefund = false">取 消</el-button>
        <el-button type="primary" @click="headlerefundsum">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getOrderDetail,
  updateReceiverInfo,
  updateMoneyInfo,
  closeOrder,
  updateOrderNote,
  deleteOrder,
  deliveryOrder,
  refundOrder
} from "@/api/order";
export default {
  data() {
    return {
      order: {},
      tableData: null,
      dialogVisible: false,
      dialogVisiblerefund: false,
      form: {
        orderSn: "",
        conmpany: "",
        desc: ""
      }
    };
  },
  created() {
    this.getBaseInfo();
  },
  methods: {
    getBaseInfo() {
      this.id = this.list = this.$route.query.id;
      getOrderDetail(this.id).then(response => {
        this.order = response.data;
        this.tableData = response.data.orderItemList;
      });
    },
    handleClose() {
      this.dialogVisible = false;
    },
    handleCloserefund() {
      this.dialogVisiblerefund = false;
    },
    // 发货
    headledeliver() {
      this.dialogVisible = true;
    },
    headlesumbit() {
      let params = new URLSearchParams();
      params.append("id", this.$route.query.id);
      params.append("deliveryCompany", this.form.conmpany);
      params.append("deliverySn", this.form.orderSn);
      if (!this.form.conmpany) {
        this.$message({
          message: "请填写快速公司!"
        });
      } else if (!this.form.orderSn) {
        this.$message({
          message: "请填写快速单号!"
        });
      } else {
        deliveryOrder(params).then(response => {
          if (response.code == 0) {
            this.$message({
              type: "success",
              message: "发货成功!"
            });
            this.$router.back();
          }
        });
      }
    },
    //  退货
    headlerefund() {
      this.dialogVisiblerefund = true;
    },
    headlerefundsum() {
      let params = new URLSearchParams();
      params.append("id", this.$route.query.id);
      params.append("returnRemark", this.form.desc);
      if (!this.form.desc) {
        this.$message({
          message: "请填写备注!"
        });
      } else {
        refundOrder(params).then(response => {
          if (response.code == 0) {
            this.$message({
              type: "success",
              message: "退款成功!"
            });
            this.$router.back();
          }
        });
      }
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.app-container {
  background: #fff;
  min-height: 500px;
  .item {
    overflow: hidden;
    .tab {
      display: flex;
      justify-content: space-between;
      height: 40px;
      margin-bottom: 15px;
    }
    .info {
      ul {
        padding: 0;
        margin: 0 !important;
        list-style: none;
        li {
          width: 50%;
          float: left;
          line-height: 36px;
          padding: 0 !important;
          color: #525151;
        }
        li.tel {
          width: 100%;
        }
        .el-table .warning-row {
          background: oldlace;
        }

        .el-table .success-row {
          background: #f0f9eb;
        }
      }
    }
  }
  .tips {
    line-height: 48px;
    span {
      font-weight: 600;
    }
  }
}
</style>
